<script setup>

import {Delete, Edit} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import * as echarts from "echarts";
const echartsRef = ref(null);
const echartsRef1 = ref(null);
const echartsRef3 = ref(null);

onMounted(() => {
  const chart = echarts.init(echartsRef.value);
  const option = {
    // ECharts 配置项
    title: {
      text: 'ECharts 示例'
    },
    tooltip: {},
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
  chart.setOption(option);

  const chart1 = echarts.init(echartsRef1.value);
  const option1 = {
    // ECharts 配置项
    title: {
      text: 'ECharts 示例'
    },
    tooltip: {},
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
  chart1.setOption(option1);


  const chart3 = echarts.init(echartsRef3.value);
  const option3 = {
    // ECharts 配置项
    title: {
      text: 'ECharts 示例'
    },
    tooltip: {},
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E', 'F','A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20]
    }]
  };
  chart3.setOption(option3);
});
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>首页</span>
      </div>
    </template>
    <el-row class="row-top">
      <el-col :span="12">
        <div ref="echartsRef" style="width: 600px; height: 400px;"></div>
      </el-col>
      <el-col :span="12">
        <div ref="echartsRef1" style="width: 600px; height: 400px;"></div>
      </el-col>
    </el-row>
  </el-card>
  <el-card style="margin-top: 10px">
    <el-row class="row-down">
      <el-col :span="24">
        <div ref="echartsRef3" style=" height: 400px;"></div>
      </el-col>
    </el-row>
  </el-card>

</template>

<style scoped lang="scss">
.row-top {
  width: 1632px;
  height: 337px;
  border-radius: 6px;
  background: #fff;
}

.row-down {
  width: 1632px;
  height: 590px;
  border-radius: 6px;
  background: #fff;
}
</style>
